<template>
    <n-popover trigger="hover">
        <template #trigger>
            <n-button class="main-framework-header-func_button" @click="show = true" quaternary circle>
                <template #icon>
                    <n-icon size="20px">
                        <SettingsOutlined />
                    </n-icon>
                </template>
            </n-button>
        </template>
        <span>设置</span>
    </n-popover>

    <!-- ----------------------------------- -->
    <n-modal v-model:show="show">
        <n-card style="width: 600px" :bordered="true" role="dialog" aria-modal="true">
            <template #header>
                <p style="font-size: 1.25rem">设置</p>
            </template>
            <template #header-extra>
                <n-icon style="cursor: pointer" size="18" @click="show = false">
                    <CloseFilled />
                </n-icon>
            </template>
            <div>
                <n-card size="small" content-style="padding:0.25rem 0.5rem">
                    <n-space justify="space-between">
                        <n-space style="align-items: center">
                            <div style="display: flex; align-items: center">
                                <n-icon size="40">
                                    <PersonOutlineOutlined />
                                </n-icon>
                            </div>
                            <n-space vertical style="gap: 0">
                                <p>Admin</p>
                                <p style="line-height: 1rem">管理员</p>
                            </n-space>
                        </n-space>
                        <n-space>
                            <n-button text @click="compControl.exit.handleExit()">退出登录</n-button>
                        </n-space>
                    </n-space>
                </n-card>
                <hr style="border: none; margin: 0.125rem" />
                <n-card size="small" content-style="padding:0.25rem 0.5rem">
                    <n-form label-placement="left" label-width="auto">
                        <n-form-item label="布局尺寸">
                            <n-slider v-model:value="compControl.size.sliderValue" :step="20" />
                        </n-form-item>
                    </n-form>
                </n-card>
            </div>
            <template #footer>
                <n-space justify="space-between">
                    <n-space></n-space>
                    <n-space>
                        <n-button @click="show = false">取消</n-button>
                        <n-button type="primary" @click="handleConfirm()">确认</n-button>
                    </n-space>
                </n-space>
            </template>
        </n-card>
    </n-modal>
</template>
<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
import { SettingsOutlined, CloseFilled, PersonOutlineOutlined } from '@vicons/material'
import axiosInstance from '@/utils/network/axios'
import type { AxiosResponse } from 'axios'
import { useMessage } from 'naive-ui'
import { useMainStore } from '@/utils/store'

///////////////////////////////////////////
function handleConfirm() {}
const message = useMessage()
const store = useMainStore()

const compControl = reactive({
    size: {
        sliderValue: 0
    },
    exit: {
        handleExit() {
            axiosInstance.delete('/login', {}).then((response: AxiosResponse) => {
                if (response.status == 200) {
                    store.app.initlized = false
                    message.success('退出成功')
                    window.location.reload()
                }
            })
        }
    }
})

///////////////////////////////////////////
const show = ref<boolean>(false)
defineExpose({ handleShow })
function handleShow() {
    show.value = true
}
</script>

<style scope lang="scss">
.main-framework-header-func_button:hover {
    background-color: #f0f0f070;
    color: orange;
}
</style>
